import { aiStudyApi } from '@/api';
import { Card, Collapse, Descriptions, Table } from 'antd';
import { useEffect, useState } from 'react';

export interface CourseDetailProps {
  aiPlanId?: string;
  title?: string;
  studyObject?: number;
  // coursewareList?: Source[];
  // /**
  //  * @desc 上架信息
  //  */
  // shelfInfo?: {
  //   isChargeText?: string;
  //   learnObjText?: string;
  // };
}

export function CourseDetail({ aiPlanId, title, studyObject }: CourseDetailProps) {
  const [list, setList] = useState<any[]>([]);
  const [studyTime, setStudyTime] = useState<number>(0);
  const [createTime, setCreateTime] = useState<string>('');
  let [tablekey, setTablekey] = useState<number>(0);
  const [collapseItems, setCollapseItems] = useState<any[]>([]);
  const columns: any[] = [
    {
      title: '触发条件次数',
      dataIndex: 'startNumber',
      key: 'startNumber',
      render: (text: any, record: any) => (
        <>
          {record.startNumber}≤次数{record.endNumber != 999999999 ? <>＜ {record.endNumber}</> : null}
        </>
      ),
    },
    {
      title: 'AI学习内容',
      dataIndex: 'classId',
      key: 'classId',
      render: (text: any, record: any) => (
        <>
          课件包/{record.parentClassName}/{record.className}
        </>
      ),
    },
    {
      title: '学习内容数量',
      dataIndex: 'studyNumber',
      key: 'studyNumber',
      render: (text: any) => <>{text}</>,
    },
  ];
  useEffect(() => {
    if (aiPlanId) {
      aiStudyApi.getAiDetail({ aiPlanId: aiPlanId }).then((res: any) => {
        const resdata = res.data;
        console.log(res.data, '打印看看详情');
        setStudyTime(resdata.studyTime);
        setCreateTime(resdata.createTime);
        setTablekey(tablekey++);
        const arr = resdata.aiStudyRuleVoList.map((el: any, index: number) => {
          const tableData = el.aiStudyTriggerVoList;
          return {
            key: index,
            label: el.groupName + '/' + el.factorName,
            children: <Table dataSource={tableData} columns={columns} pagination={false} />,
          };
        });
        setCollapseItems(arr);
      });
    }
  }, [aiPlanId, tablekey]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Card title="基本信息">
        <Descriptions column={2}>
          <Descriptions.Item label="计划名称">{title}</Descriptions.Item>
          <Descriptions.Item label="学习时间">{studyTime} 小时</Descriptions.Item>
          <Descriptions.Item label="学习对象">{studyObject == 1 ? '协会' : '企业'}</Descriptions.Item>
          <Descriptions.Item label="创建时间">{createTime}</Descriptions.Item>
        </Descriptions>
      </Card>
      <Card title="AI学习规则">
        <div style={{ fontWeight: 'bold', marginBottom: 5 }}>触发条件</div>
        <Collapse
          defaultActiveKey={[]}
          key={tablekey}
          // onChange={onChange}
          // expandIconPosition={expandIconPosition}
          items={collapseItems}
        />
      </Card>
    </div>
  );
}
